<template>
  <el-dialog width="1200px" title :visible.sync="dialogVisible" :before-close="close">
    <scrollbar>
      <div id="one" align="center">
        <h1 style="font-size:25px;" align="center">Inventory</h1>
      </div>
      <div id="info">
      <div id="two" align="left">
        <svg id="barcode" />
      </div>
      <div id="three" align="left">
        <p>Printer：{{printer}}</p>
        <p>PrintTime：{{dateTime}}</p>
      </div>
      </div>
      <div id="four">
        <TABLE align="center" border="1" cellspacing="0" cellpadding="1" width="100%" style="border-collapse:collapse;table-layout:fixed" bordercolor="#333333">
          <thead style="font-size:12.5px">
            <TR>
              <TD width='5%'></TD>
              <TD width='10%'>
                <DIV align="center">
                  <b>SKU</b>
                </DIV>
              </TD>
              <TD width='10%'>
                <DIV align="center">
                  <b>Supplier Code</b>
                </DIV>
              </TD>
              <TD>
                <DIV align="center">
                  <b>ProductName</b>
                </DIV>
              </TD>
              <TD width='15%'>
                <DIV align="center">
                  <b>Spec</b>
                </DIV>
              </TD>
              <TD width='8%'>
                <DIV align="center">
                  <b>Qty</b>
                </DIV>
              </TD>
              <TD width='15%'>
                <DIV align="center">
                  <b>Location</b>
                </DIV>
              </TD>
              <TD width='8%'>
                <DIV align="center">
                  <b>Check Qty</b>
                </DIV>
              </TD>
            </TR>
          </thead>
          <tbody style="font-size:12px">
            <tr v-for="(item,i) in tableData" :key="i">
              <td align="center">{{i+1}}</td>
              <td align="center">{{item.productspeccode}}</td>
              <td align="center">{{item.suppliercode}}</td>
              <td align="center" style="font-size:12px;line-height:22px;">{{item.productname}}</td>
              <td align="center" style="font-size:12px;line-height:22px;">{{item.productspec}}</td>
              <td align="center">{{item.storage}}</td>
              <td align="center">{{item.locationcode}}</td>
              <td align="center">{{item.checkqty}}</td>
            </tr>
          </tbody>
        </TABLE>
      </div>
    </scrollbar>
    <div slot="footer" align="center">
      <el-button type="primary" @click="print()">{{$t('m.print')}}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import scrollbar from '@/components/common/scrollbar'
import { getLodop } from '@/utils/LodopFuncs'
import JsBarcode from 'jsbarcode'
import common from '@/utils/common'
export default {
  name:'printPopup',
  props:['dialogVisible', 'detail','printer'],
  data(){
    return {
      tableData:[],
      stocktakecode:'',
      dateTime:common.timestampToTime(new Date())
    }
  },
  components:{
    scrollbar
  },
  mounted(){
    this.tableData = (this.detail.stockTakeDetailOutputList)
    if(this.detail.stocktakecode){
      this.stocktakecode = this.detail.stocktakecode
      this.$nextTick(() => {
        this.barcode()
      })
    }
  },
  methods:{
    close(){
      this.$emit('close')
    },
    barcode(){
      let barCode = this.stocktakecode
      JsBarcode('#barcode', barCode, {
        format:'CODE128', //选择要使用的条形码类型
        height:60, //高度
        width:1.5, //设置条之间的宽度
        fontSize:14, //设置文本的大小
        text:barCode, //显示文本
        displayValue:true, //是否在条形码下方显示文字
        textPosition:'bottom', //设置文本的垂直位置
        //fontOptions: "bold italic", //使文字加粗体或变斜体
        background:'#fff', //设置条形码的背景
        font:'微软雅黑', //设置文本的字体
        //lineColor: "#2196f3", //设置条和文本的颜色。
        margin:15 //设置条形码周围的空白边距
      })
    },
    printInit(){
      let LODOP = getLodop()
      LODOP.PRINT_INIT('到货通知单')
      LODOP.SET_PRINT_PAGESIZE(1, '', '', '')
      let strStyle = '<style>table,td{padding:3px 10px;word-break:break-word;}tbody td{word-wrap:break-word;}</style>'
      LODOP.ADD_PRINT_TABLE(180, '3%', '94%', 800, strStyle + document.getElementById('four').innerHTML)
      LODOP.SET_PRINT_STYLEA(0, 'Vorient', 3)
      LODOP.ADD_PRINT_HTM(30, '3%', '94%', 109, document.getElementById('one').innerHTML)
      LODOP.ADD_PRINT_HTM(80, '68%', '94%', 280, document.getElementById('three').innerHTML)
      LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)
      LODOP.SET_PRINT_STYLEA(0, 'LinkedItem', 1)
      if(this.detail.stocktakecode){
        LODOP.ADD_PRINT_HTM(
          60, //距离上面高度
          '3%',
          '94%',
          280, //元素高度
          document.getElementById('two').innerHTML
        )
      }

      LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)
      LODOP.SET_PRINT_STYLEA(0, 'LinkedItem', 1)
      // LODOP.NewPageA()
      // LODOP.ADD_PRINT_TABLE(180, '3%', '94%', 328, strStyle + document.getElementById('four').innerHTML)
      // LODOP.SET_PRINT_STYLEA(0, "Vorient", 3)
      LODOP.ADD_PRINT_HTM(
        10,
        650,
        200,
        100,
        '<font color=\'#0000ff\' format=\'Num\'><span tdata=\'pageNO\'>' +
          'NO.##'+'</span>/<span tdata=\'pageCount\'>'+' Total : ##'+'</span></font>'
      )
      LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)
      LODOP.SET_PRINT_STYLEA(0, 'Horient', 1)
    },
    print(index){
      let LODOP = getLodop()
      this.printInit(index)
      LODOP.PREVIEW()
      // LODOP.PRINT_DESIGN()
      this.$emit('close')
      // LODOP.PRINT(); 直接打印
      //LODOP.PRINTA(); 选择打印机打印
    }
  }
}
</script>
<style lang="scss" scoped>
table {
  text-align: left;
}
#one {
  color: #333;
}
tr > td {
  min-width: 30px;
  padding: 8px 5px;
  word-break: break-word;
}
#info {
  display:flex;
  justify-content:space-between
}
#three {
  padding: 25px 0;
}
// ::v-deep .el-dialog {
//   position: absolute;
//   height: 88%;
//   left: 50%;
//   margin-top: 50px !important;
//   transform: translateX(-50%);
//   overflow-y: scroll;
// }
// .btns{
//   position: fixed;
//   bottom: 20px;
//   left: 50%;
//   transform: translateX(-50%);
// }
</style>